
<template>
    <el-container>
        <v-row class="SearchAreaFunc">

            <!-- 创建按钮 -->
            <el-button 
                v-if="store.getters.getIsShowCreateButton" type="primary" 
                @click="onCreate" right plain>新增
            </el-button>
            
            <!-- 数据编辑或新增的表单弹窗 -->
            <AtForm max-width="75%" height="75%"
                v-if="store.getters.getIsEdit || store.getters.getIsCreate"
                v-model="isShow"
                :title="title"
                :formConfig="formConfig"
                :initialData="props.initialData"
                @optSave="onSave"
                @optCancel="onCancel"
            />

        </v-row>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import AtForm from '@/components/common/atForm/index.vue'
import { useStore } from 'vuex'
import { changeIsEdit, changeIsCreate } from '@/assets/js/common'


// 数据管理
let store = useStore()
const props = defineProps({
    title: {
        type: String
    },
    formConfig: {
        type: Array
    },
    initialData: {
        type: Object,
        default: () => ({})
    }
}) 

let emit = defineEmits(['optSave'])
let isShow = () => store.getters.getIsEdit || store.getters.getIsCreate


function onCreate(){
    // 新增数据，表单数据默认为空
    changeIsCreate(true)

    // 如果用户点击了新增，将表单数据清空
    for (const key in props.initialData){
        props.initialData[key] = ''
    }
}
function onSave(saveData){
    emit("optSave", saveData)
    onCancel()
    console.log("待保存数据saveData:", saveData)
}
function onCancel(){
    changeIsEdit(false)
    changeIsCreate(false)
}

</script>

<style scope>
.SearchAreaFunc {
    position: fixed;
    top: 75px;
    right: 80px;
}
</style>